<template>
  <div class="text p_rel description">
    <div class="content">
      <div
        class="content_full"
        :class="!ellipsisContent ? '' : expandContent ? '' : 'hidden'"
        v-html="content"
      ></div>
      <div
        class="content_ellipsis"
        :class="!ellipsisContent ? 'hidden' : expandContent ? 'hidden' : ''"
        v-html="ellipsisContent"
      ></div>
      <div class="btns">
        <div class="expand_btn" @click="expand" v-show="ellipsisContent">
          {{ expandContent ? "收起" : "展开" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 制作文本子组件
export default {
  data() {
    return {
      letterNum: 37, //每行文字个数
      maxLine: 6, //行数
      ellipsisContent: null, //替换内容
      expandContent: false, //是否展开
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getEllipsisContent();
    });
  },
  props: {
    content: {
      typeof: String,
      required: true,
    },
  },
  methods: {
    // 展开文本评论
    expand() {
      this.expandContent = !this.expandContent;
    },
    // 获取动态列表数据，并初始化数据
    getEllipsisContent() {
      // 当文本内容超过6行时，需要进行省略操作
      const DIV = document.createElement("div");
      DIV.innerHTML = this.content;
      const DIVNODES = DIV.childNodes;
      let letterNum = 0; //当前字符个数
      let maxLetterNum = this.maxLine * this.letterNum - 10; //最大字符数
      let lastBRNode = false;
      let documentF = document.createElement("div");
      let needExpand = false;
      let nodeLen = DIVNODES.length;
      // console.log(DIVNODES)
      for (let [index, node] of Object.entries(DIVNODES)) {
        // 非换行<br/>节点
        if (node.nodeName != "BR") {
          lastBRNode = false;
          // 文本节点，记录内容长度
          if (node instanceof Text) {
            let contentData = node.data;
            let len = contentData.length;
            // 未达上限，记录长度
            if (len + letterNum <= maxLetterNum) {
              letterNum += len;
              documentF.appendChild(node);
            }
            // 超过长度，截取剩余长度
            else {
              let remainLetterNum = maxLetterNum - letterNum;
              contentData = contentData.substr(0, remainLetterNum) + "...";
              letterNum += remainLetterNum;
              // 当进入这里，说明已经到结尾了
              let textNode = document.createTextNode(contentData);
              documentF.appendChild(textNode);
            }
          } else if (node instanceof Image) {
            if (letterNum >= maxLetterNum) {
              break;
            }
            letterNum++;
            documentF.appendChild(node);
          }
        }
        // 换行
        else {
          let currentLine = Math.ceil(letterNum / this.letterNum);
          if (lastBRNode) currentLine++;
          letterNum = currentLine * this.letterNum;
          lastBRNode = true;
          // 如果是第六行后的换行
          if (currentLine >= this.maxLine) {
            let lastNode = documentF.lastChild;
            if (lastNode instanceof Text) {
              lastNode.textContent += "...";
            } else {
              let textNode = document.createTextNode("...");
              documentF.appendChild(textNode);
            }
          }
          // 不是末尾换行
          if (index != nodeLen - 1) {
            documentF.appendChild(node);
          }
        }
        if (letterNum >= maxLetterNum) {
          this.$set(this, "expandContent", false);
          needExpand = true;
          break;
        }
      }
      if (needExpand) this.$set(this, "ellipsisContent", documentF.innerHTML);
    },
  },
};
</script>

<style lang="scss">
.text {
  letter-spacing: 0.5px;
  user-select: text;
  cursor: pointer;
}
.p_rel {
  position: relative;
}
.description {
  max-width: 100%;
  display: inline-block;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 22px;
  word-wrap: break-word;
}
.content_full {
  width: 100%;
  word-break: break-word;
  word-wrap: break-word;
  &.hidden {
    display: none;
    height: 0;
  }
}
.content_ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  word-wrap: break-word;
  &.hidden {
    display: none;
    height: 0;
  }
}
.dynamic_link {
  border-radius: 4px;
}
.hover_bg {
  &:hover {
    background-color: #dde2eb;
  }
}
.expand_btn {
  color: #178bcf;
  line-height: 22px;
  cursor: pointer;
  display: inline-block;
  &:hover {
    color: #00b5e5;
  }
}
</style>